<template>
  <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="form">
    <el-form-item prop="keyword">
      <el-input
          v-model="dataForm.keyword"
          placeholder="套餐名称 / 姓名 / 电话"
          size="default"
          class="keyword"
          clearable
      />
    </el-form-item>
    <el-form-item class="date">
      <el-date-picker v-model="dataForm.date" type="date" placeholder="选择日期" :editable="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
    </el-form-item>
    <el-form-item>
      <el-button
          size="default"
          type="primary"
          :icon="Search"
          @click="searchHandle()"
      >查询</el-button
      >
    </el-form-item>
    <el-form-item class="mold">
      <el-radio-group
          v-model="dataForm.statusLabel"
          size="medium"
          @change="searchHandle()"
      >
        <el-radio-button label="全部"></el-radio-button>
        <el-radio-button label="已结束"></el-radio-button>
      </el-radio-group>
    </el-form-item>
  </el-form>
  <div class="table-container" v-show="!empty">
    <el-table v-loading="data.loading" :data="data.dataList" border :header-cell-style="{'background':'#f5f7fa'}" class="appointment-table">
      <el-table-column type="index" header-align="center" align="center" width="100" label="序号" fixed >
        <template #default="scope">
          <span>{{ (data.pageIndex - 1) * data.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodsTitle" header-align="center" align="center" label="套餐名称" min-width="250" />
      <el-table-column prop="name" header-align="center" align="center" label="体检人" min-width="120"/>
      <el-table-column prop="date" header-align="center" align="center" label="预约日期" min-width="120"/>
      <el-table-column prop="status" header-align="center" align="center" label="状态" min-width="120"/>
      <el-table-column header-align="center" align="center" label="操作" min-width="150">
        <template #default="scope">
          <el-button type="text" :disabled="scope.row.filePath == null" @click="downloadHandle(scope.row.name, scope.row.filePath)">
            体检报告
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="data.pageIndex"
        :page-sizes="[10, 20, 30]"
        :page-size="data.pageSize"
        :total="data.totalCount"
        style="margin-top: 20px;"
        layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
  <div class="empty" v-show="empty">
    <el-empty :image-size="200" />
  </div>
</template>

<script setup lang="ts">
import {Search} from "@element-plus/icons-vue";
import router from "../../router/index";import { reactive, ref, Ref, getCurrentInstance } from "vue";
import { dayjs } from "element-plus";
import isBetween from "dayjs/plugin/isBetween";
dayjs.extend(isBetween);

const { proxy } = getCurrentInstance();

let empty = ref(false);

const dataForm = reactive({
  keyword: null,
  date: null,
  status: null,
  statusLabel: '全部'
});

const dataRule = reactive({
  keyword: [
    {
      required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,30}$', message: '关键字格式错误'
    }
  ]
});

const data = reactive({
  dataList: [],
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  loading: false
});

function loadDataList() {
  data.loading = true;
  if(dataForm.statusLabel == '全部') {
    dataForm.status = null;
  } else {
    dataForm.status = 4;
  }
  let json = {
    page: data.pageIndex,
    length: data.pageSize,
    keyword: dataForm.keyword,
    date: dataForm.date,
    status: dataForm.status
  };
  proxy.$http('/front/appointment/searchByPage', 'POST', json, true, resp => {
    let statusEnum = {
      '1': '未签到',
      '2': '已签到',
      '3': '已结束',
      '4': '已关闭'
    };
    let page = resp.page;
    let list = page.list;
    for(let one of list) {
      one.status = statusEnum[one.status + ""];
      if (one.filePath != null) {
        one.filePath = `${proxy.$minioUrl}/${one.filePath}`;
      }
    }
    data.dataList = list;
    data.totalCount = page.totalCount;
    data.loading = false;
    empty = list.length == 0;
  });
}

loadDataList();

function searchHandle() {
  proxy.$refs['form'].validate(valid => {
    if (valid) {
      proxy.$refs['form'].clearValidate();
      if (dataForm.keyword == '') {
        dataForm.keyword == null;
      }
      if (dataForm.date == '') {
        dataForm.date == null;
      }
      if (dataForm.status == '') {
        dataForm.status == null;
      }
      loadDataList();
    } else {
      return false;
    }
  });
}

// 分页控件相关函数
function sizeChangeHandle(val) {
  data.pageIndex = 1;
  data.pageSize = val;
  loadDataList();
}

// 分页控件相关函数
function currentChangeHandle(val) {
  data.pageIndex = val;
  loadDataList();
}

</script>

<style scoped lang="less">
@import url("appointment_list.less");
</style>